<!-- 雪具收取、雪具寄送，组件 -->
<script lang="ts" setup>
import * as TagList from '@/pages-sub/components/tag-list.vue'
import { useOrder } from '@/store/order'
import { getStoreList } from '@/api/home'
import { checkMobleRule } from '@/utils'

const props = defineProps({
  // 1 = 雪具收取; 2 = 雪具寄送
  types: {
    type: Number,
    default: 1,
  },
})

const orderStore = useOrder()

const form = ref()

const storeArr = ref<Record<string, any>>([])
const address = uni.getStorageSync(`addressInfo${props.types}`)

const formData = reactive<Record<string, any>>(address ? address : {
  name: '',
  phone: '',
  address: '',
})
// 门店选择框
const showPopup = ref(false)

const getLabel = computed(() => {
	return props.types === 1 ? '联系人' : '收货人'
})

const rules = ref({
	name: [{ required: true, message: `请填写${getLabel.value}` }],
	phone: [
		{ required: true, message: '请填写联系方式' },
		{
			required: true,
			validator: (value: any) => {
				if (!checkMobleRule(value)) return Promise.reject('请填写正确的联系方式')
				
				return Promise.resolve()
			}
		}
	],
	address: [{ required: true, message: '请填写详细地址' }]
})

onMounted(() => {
	initStoreList()
})

// 获取门店列表
function initStoreList() {
	getStoreList().then((res) => {
		storeArr.value = res
	})
}

const getData = computed(() => {
  // 雪具收取标签数组
  const list = [
    {
      value: '0',
      label: '快递',
    },
    {
      value: '1',
      label: '自送',
    },
    {
      value: '2',
      label: '店家取货',
    },
  ]

  // 雪具寄送标签数组
  const list2 = [
    {
      value: '0',
      label: '快递',
    },
    {
      value: '1',
      label: '自提',
    },
    {
      value: '2',
      label: '店家送货',
    },
  ]
  const data = {
    title: props.types === 1 ? '雪具收取' : '雪具寄送',
    tagData: props.types === 1 ? list : list2,
    active: props.types === 2 ? orderStore.orderInfo.way : orderStore.orderInfo.kd_type,
  }
  return data
})
// 获取选项标题
const getModuleTitle = computed(() => {
  let obj = {
    '': '',
    '0': '寄送地址：',
    '1': '门店地址：',
    '2': '取货地址：',
  }
  if (props.types === 1) {
    return obj[orderStore.orderInfo.kd_type]
  }

  obj = {
    '': '',
    '0': '收货地址：',
    '1': '门店地址：',
    '2': '收货地址：',
  }

  return obj[orderStore.orderInfo.way]
})
// 根据选项是否显示门店地址列表
const showStoreList = computed(() => {
  if (props.types === 1)
    return ['0', '1'].includes(orderStore.orderInfo.kd_type)
  else return orderStore.orderInfo.way === '1'
})

// 配送方式变更
function handleActive(value: string) {
  const obj = {}
  // 雪具收取
  if (props.types === 1) {
    // 选择了雪具收取，清空雪具寄送的选项
    // obj.way = ''
    obj['kd_type'] = value
  }
  else { // 雪具寄送
    // 选择了雪具寄送，清空雪具收取的选项
    // obj.kd_type = ''
    obj['way'] = value
  }
  orderStore.setOrderInfo(obj)
}
// 复制
function handleCopy() {
	if (orderStore.selectStore.id === undefined) {
		uni.showToast({
			icon: 'none',
			title: '请先选择门店'
		})
		return
	}
	const data = `收件人：HAPPY雪具维养中心
电话：${orderStore.selectStore.phone}
地址：${orderStore.selectStore.position}`
  uni.setClipboardData({
    data,
    showToast: true,
    success() {
      console.log('success')
    },
  })
}
// 校验表单数据
function checkFormData() {
	return form.value.validate()
}

// 门店选择
function handleStore(item: AnyObject) {
	orderStore.setSelectStore(item)
	showPopup.value = false
}

defineExpose({
  showStoreList,
  checkFormData,
  formData
})
</script>

<template>
  <wd-collapse-item :title="getData.title" :name="`delivery${props.types}`" custom-class="collapse-item">
	<view class="store-box">
		<view class="module-title">门店：</view>
		<view class="select-box">
			<view class="picker-input" @click="showPopup = true">
				<view :class="[{ select: orderStore.selectStore.id }]">{{ orderStore.selectStore.id ? orderStore.selectStore.name : `点击选择门店`}}</view>
				<wd-icon name="arrow-down" size="18px" color='#FF844C'></wd-icon>
			</view>

			<view v-if="props.types === 1 && getData.active == 0" class="btn-copy" @click="handleCopy">
				复制
			</view>
		</view>
	</view>
    <tag-list :tag-data="getData.tagData" :active="getData.active" flex gap="11px" @change="handleActive" />

    <view v-if="!showStoreList" class="delivery-box">
      <!-- 门店地址 -->
      <view>
        <view class="module-title">
          {{ getModuleTitle }}
        </view>
        <!-- 雪具收取（快递、自送，显示）、雪具寄送（自提，显示） -->
        <!-- <view v-if="showStoreList" class="store-list">
          <view v-for="item in storeArr" :key="item.id" class="store-item">
            <image class="icon" webp src="/static/images/check.png" />
            <view class="right-pannel">
              <view class="name">
                {{ item.name }}
              </view>
              <view class="address">
                {{ item.position }}
              </view>
              雪具收取、并且选择了快递
              <view v-if="props.types === 1 && getData.active == 0" class="flex-between">
                <view class="mobile">
					<text>HAPPY雪具维养中心</text>
					<text>电话：{{ item.phone }}</text>
                </view>
                <view class="btn-copy" @click="handleCopy(item)">
					复制
                </view>
              </view>
            </view>
          </view>
        </view> -->
        <!-- 用户地址form表单 -->
        <wd-form
			ref="form"
			custom-class="address-form"
			:model="formData"
			:rules="rules"
			error-type="toast"
		>
          <wd-cell-group border>
            <wd-input
              v-model="formData.name"
              :label="getLabel"
              prop="name"
              label-width="80px"
              clearable
              :placeholder="`请输入${getLabel}`"
              custom-class="address-item"
            />
            <wd-input
              v-model="formData.phone"
              label="联系方式"
              prop="phone"
              label-width="80px"
              clearable
              placeholder="请输入联系方式"
              custom-class="address-item"
			  :maxlength="11"
            />
            <wd-textarea
              v-model="formData.address"
              label="详细地址"
              prop="address"
              label-width="80px"
              auto-height
              clearable
              placeholder="请输入详细地址"
              custom-class="address-item"
            />
          </wd-cell-group>
        </wd-form>
      </view>
    </view>
	
	<wd-action-sheet v-model="showPopup" title="选择门店" @close="showPopup = false">
	  <view class="store-list">
	    <view v-for="item in storeArr" :key="item.id" class="store-item" @click="handleStore(item)">
	      <!-- <image class="icon" webp src="/static/images/check.png" /> -->
	      <view class="right-pannel">
	        <view class="name">
	          {{ item.name }}
	        </view>
	        <view class="address">
	          {{ item.position }}
	        </view>
	        雪具收取、并且选择了快递
	        <view v-if="props.types === 1 && getData.active == 0" class="flex-between">
	          <view class="mobile">
	  			<text>HAPPY雪具维养中心</text>
	  			<text>电话：{{ item.phone }}</text>
	          </view>
	        </view>
	      </view>
		  
		  <wd-icon v-if="item.id === orderStore.selectStore.id" name="check" size="18px" color='#FF844C'></wd-icon>
	    </view>
	  </view>
	</wd-action-sheet>
  </wd-collapse-item>
</template>

<style lang="scss" scoped>
	.module-title {
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		flex-shrink: 0;
	}
	.store-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 15px;

		.select-box {
			flex: 1;
			display: flex;
			align-items: center;
		  
			.picker-input {
				flex: 1;
			}
		  
			.btn-copy {
				margin-left: 10px;
				background-color: #58618e;
				border-radius: 8px;
				color: #fff;
				text-align: center;
				width: 63px;
				height: 28px;
				line-height: 28px;
			}
		}
	}

	.delivery-box {
		padding-top: 15px;
		color: #23282c;
	}
	
	.store-list {
	  padding: 0 20px 20px 20px;
	  .store-item {
	    display: flex;
		padding-right: 15px;
	    & + .store-item {
	      padding-top: 9px;
	    }
	    .icon {
	      width: 10px;
	      height: 10px;
	      flex-shrink: 0;
	      margin-top: 3px;
	    }
	
	    .right-pannel {
	      // padding-left: 9px;
	      flex: 1;
	      .name {
	        font-size: 14px;
	        font-weight: 600;
	        line-height: 18px;
	      }
	
	      .address {
	        font-size: 14px;
	        font-weight: 400;
	        line-height: 18px;
	      }
	    }
	
	    .flex-between {
	      font-size: 12px;
	
	      text {
	        & + text {
	          padding-left: 10px;
	        }
	      }
	    }
	  }
	}
</style>
